<script setup lang='ts'>
import { FormItemProps, FormRule } from 'tdesign-vue-next';
import { PropType, ref, watch } from 'vue';

interface ProFormTextareaProps {
    placeholder?: string;
    modelValue: string;
    name: string;
    label?: string;
    formAttrs?: FormItemProps;
    readonly?: boolean;
    disabled?: boolean;
    rules?: Array<FormRule>;
    help?: string;
}

const props = defineProps({
    name: {
        type: String,
        default: '',
        require: true
    },
    modelValue: {
        type: String,
        default: '',
        require: true
    },
    label: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: '请输入内容'
    },
    formAttrs: {
        type: <PropType<FormItemProps>>Object,
        default: () => ({})
    },
    readonly: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    },
    rules: {
        type: Array<FormRule>,
        default: <FormRule>[]
    },
    help: {
        type: String,
        default: ''
    }
});

const emits = defineEmits<{
    (e: 'update:modelValue', value: string): void;
    (e: 'blur', value: any): void;
    (e: 'change', value: any): void;
    (e: 'focus', value: any): void;
    (e: 'keydown', value: any): void;
    (e: 'keypress', value: any): void;
    (e: 'keyup', value: any): void;
}>();

const innerValue = ref<any>(props.modelValue);

watch(() => props.modelValue, (val) => {
    innerValue.value = val;
})

function handleChange(e: string, context: any) {
    emits('update:modelValue', e)
    emits('change', { value: e, context })
}

</script>

<template>
    <t-form-item :help="props.help" v-bind="props.formAttrs" :rules="props.rules" :name="name" :label="label">
        <t-textarea @change="handleChange" @blur="(value: string, context: any) => emits('blur', { value, context })"
            @focus="(value: string, context: any) => emits('focus', { value, context })"
            @keydown="(value: string, context: any) => emits('keydown', { value, context })"
            @keypress="(value: string, context: any) => emits('keypress', { value, context })"
            @keyup="(value: string, context: any) => emits('keyup', { value, context })" :disabled="props.disabled"
            :readonly="props.readonly" v-bind="$attrs" v-model="innerValue" placeholder="请输入内容" />
    </t-form-item>
</template>

<style scoped></style>